<template>
	<view class="out_box">
		<div class="my_div">
			<ul v-for="val,index in liList" :key="index">
				<li ref="imgList"><img :src="val" alt=""></li>
			</ul>
			<div class="but_box">
				<img src="../assets/images/编组 16.png" class="left_but" @click="changeImg(this.currentIndex-1)">
				<img src="../assets/images/编组 17.png" class="right_but" @click="changeImg(this.currentIndex+1)">
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				liList: [
					"./images/q.jpg",
					"./images/q (1).jpg",
					"./images/q (2).jpg",
					"./images/q (3).jpg"
				]
			}
		},
		mounted() {
			this.changeImg(this.currentIndex)
		},
		methods: {
			changeImg(index) {
				const iList = this.$refs.imgList
				if (index < 0) {
					index = iList.length - 1
				}
				if (index >= iList.length) {
					index = 0
				}
				this.currentIndex = index
				for (let i = 0; i < iList.length; i++) {
					if (i === this.currentIndex) {
						iList[i].style.opacity = 1;
						continue
					}
					iList[i].style.opacity = 0;
				}
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0px;
		padding: 0px;
	}
	.my_div {
		width: 100%;
		height: 500px;
		position: relative;
		margin: -80px auto;
	}

	.but_box {
		width: 100%;
		height: 300px;
		/* background-color: aqua; */
		position: absolute;
		top: 50%;
		margin-top: -50px;
		left: 0px;
		display: flex;
		justify-content: space-between;

	}

	.left_but,
	.right_but {
		width: 50px;
		height: 50px;
		margin-top: 25px;

	}

	ul {
		width: 100%;
		height: 100%;
		position: absolute;
		list-style: none;
	}

	li {
		width: 100%;
		height: 100%;
		position: absolute;
		transition: all 0.5s linear;
	}

	img {

		width: 100%;
		height: 100%;
	}

	.point_box {
		width: 120px;
		height: 100px;
		/* background-color: black; */
		position: absolute;
		bottom: 0px;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		left: 50px;
	}

	.point_val {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		border: 1px solid rgba(0, 0, 0, .05);
		background: rgba(255, 255, 255, .4);
	}

	.choosed {
		width: 10px;
		height: 10px;
		border: 3px solid rgba(0, 0, 0, .1);
		background: #ffffff;
	}
</style>